<template>
  <div class="gantt-container">
    <div class="controls">
      <div class="date-range-display">
        <i class="fas fa-calendar-alt"></i> {{ formatDateRange(dateRange) }}
      </div>
      <div class="scroll-control">
        <button @click="scrollDates(-7)">
          <i class="fas fa-arrow-left"></i> 前一周
        </button>
        <button @click="scrollToToday">
          <i class="fas fa-calendar-day"></i> 今天
        </button>
        <button @click="scrollDates(7)">
          后一周 <i class="fas fa-arrow-right"></i>
        </button>
      </div>
    </div>
    
    <div class="legend">
      <div v-for="(process, index) in processes" :key="index" class="legend-item">
        <div class="legend-color" :style="{ backgroundColor: process.color }"></div>
        <span>{{ process.name }}</span>
      </div>
      <div class="legend-item">
        <div class="legend-color" style="background: repeating-linear-gradient(45deg, #fff8e1, #fff8e1 10px, #ffecb3 10px, #ffecb3 20px);"></div>
        <span>今天</span>
      </div>
    </div>
    
    <div class="gantt-table-container"
         @mousedown="startDrag"
         @mousemove="doDrag"
         @mouseup="stopDrag"
         @mouseleave="stopDrag">
      <table class="gantt-table">
        <thead>
          <tr>
            <th class="order-header">订单号</th>
            <!-- 新增的5列信息 -->
            <th class="info-header">客户</th>
            <th class="info-header">产品</th>
            <th class="info-header">数量</th>
            <th class="info-header">优先级</th>
            <th class="info-header">状态</th>
            
            <th 
              v-for="(date) in dateRange" 
              :key="date.getTime()"
              class="date-header"
              :class="{ 'today-header': isToday(date) }"
            >
              {{ formatDate(date) }}
              <div style="font-size: 0.8rem; font-weight: normal;">{{ getDayOfWeek(date) }}</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in orders" :key="order.id">
            <td class="order-cell" @click="openEditDialog(order)">
              {{ order.id }}
              <span class="edit-icon"><i class="fas fa-edit"></i></span>
            </td>
            
            <!-- 新增的5列数据 -->
            <td class="info-cell">{{ order.customer }}</td>
            <td class="info-cell">{{ order.product }}</td>
            <td class="info-cell">{{ order.quantity }}kg</td>
            <td class="info-cell" :style="{ color: priorityColors[order.priority] }">
              <i :class="priorityIcons[order.priority]"></i> {{ order.priority }}
            </td>
            <td class="info-cell" :style="{ backgroundColor: statusColors[order.status] }">
              {{ order.status }}
            </td>
            
            <td 
              v-for="date in dateRange" 
              :key="date.getTime()"
              class="process-cell"
              :class="{ 'today-cell': isToday(date) }"
            >
              <div class="process-container">
                <div 
                  v-for="(process, index) in processes" 
                  :key="index"
                  class="process-bar"
                  :class="getProcessClass(process)"
                  :style="getProcessStyle(order, process, date)"
                  :title="getProcessTooltip(order, process, date)"
                ></div>
              </div>
            </td>
          </tr>
          <tr v-if="orders.length === 0">
            <td :colspan="dateRange.length + 6" class="empty-state">
              <i class="fas fa-inbox"></i>
              <h3>暂无订单数据</h3>
              <p>点击下方按钮添加新订单或检查数据源</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 编辑对话框 -->
    <div v-if="editingOrder" class="dialog-overlay">
      <div class="edit-dialog">
        <button class="close-dialog" @click="closeDialog">
          <i class="fas fa-times"></i>
        </button>
        <h2><i class="fas fa-edit"></i> 编辑订单: {{ editingOrder.id }}</h2>
        
        <div 
          v-for="(process, index) in processes" 
          :key="index"
          class="process-form"
          :style="{ '--process-color': process.color }"
        >
          <h3><i :class="process.icon"></i> {{ process.name }}</h3>
          <div class="form-row">
            <div class="form-group">
              <label><i class="fas fa-calendar-start"></i> 开始日期:</label>
              <input 
                type="date" 
                v-model="editingOrder.processes[process.key].startDate"
                :min="getMinStartDate(process, index)"
              >
            </div>
            <div class="form-group">
              <label><i class="fas fa-hourglass-half"></i> 持续天数:</label>
              <input 
                type="number" 
                v-model="editingOrder.processes[process.key].duration"
                min="1"
                max="10"
              >
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label><i class="fas fa-weight-hanging"></i> 单日投入量 (kg):</label>
              <input 
                type="number" 
                v-model="editingOrder.processes[process.key].dailyInput"
                min="100"
                step="100"
              >
            </div>
            <div class="form-group">
              <label><i class="fas fa-calendar-day"></i> 结束日期:</label>
              <div class="duration-display">
                {{ getEndDate(editingOrder.processes[process.key]) || '未设置' }}
              </div>
            </div>
          </div>
        </div>
        
        <div class="dialog-buttons">
          <button class="save-btn" @click="saveOrder">
            <i class="fas fa-save"></i> 保存
          </button>
          <button class="cancel-btn" @click="closeDialog">
            <i class="fas fa-times"></i> 取消
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductionGantt',
  data() {
    return {
      processes: [
        { key: 'smelting', name: '冶炼', color: '#FF6B6B', icon: 'fas fa-fire' },
        { key: 'hydrogenBreaking', name: '氢破', color: '#4ECDC4', icon: 'fas fa-atom' },
        { key: 'jetMilling', name: '气流磨', color: '#FFD166', icon: 'fas fa-wind' },
        { key: 'pressing', name: '压型', color: '#6A0572', icon: 'fas fa-compress-arrows-alt' },
        { key: 'sintering', name: '烧结', color: '#1A936F', icon: 'fas fa-thermometer-full' }
      ],
      orders: [
        {
          id: 'ORD-2023-001',
          customer: '北方材料',
          product: '钕铁硼N52',
          quantity: 4500,
          priority: '高',
          status: '生产中',
          processes: {
            smelting: { startDate: '2023-06-01', dailyInput: 1200, duration: 2 },
            hydrogenBreaking: { startDate: '2023-06-03', dailyInput: 800, duration: 3 },
            jetMilling: { startDate: '2023-06-06', dailyInput: 600, duration: 2 },
            pressing: { startDate: '2023-06-08', dailyInput: 400, duration: 2 },
            sintering: { startDate: '2023-06-10', dailyInput: 200, duration: 3 }
          }
        },
        {
          id: 'ORD-2023-002',
          customer: '南方电机',
          product: '钕铁硼N48',
          quantity: 3200,
          priority: '中',
          status: '待排产',
          processes: {
            smelting: { startDate: '2023-06-10', dailyInput: 1500, duration: 3 },
            hydrogenBreaking: { startDate: '2023-06-13', dailyInput: 1000, duration: 2 },
            jetMilling: { startDate: '2023-06-15', dailyInput: 700, duration: 3 },
            pressing: { startDate: '2023-06-18', dailyInput: 500, duration: 2 },
            sintering: { startDate: '2023-06-20', dailyInput: 300, duration: 4 }
          }
        },
        {
          id: 'ORD-2023-003',
          customer: '西部科技',
          product: '钐钴磁体',
          quantity: 2800,
          priority: '紧急',
          status: '已排产',
          processes: {
            smelting: { startDate: '2023-06-15', dailyInput: 1800, duration: 2 },
            hydrogenBreaking: { startDate: '2023-06-17', dailyInput: 1200, duration: 3 },
            jetMilling: { startDate: '2023-06-20', dailyInput: 900, duration: 2 },
            pressing: { startDate: '2023-06-22', dailyInput: 600, duration: 3 },
            sintering: { startDate: '2023-06-25', dailyInput: 400, duration: 3 }
          }
        }
      ],
      editingOrder: null,
      startDate: new Date(),
      isDragging: false,
      startDragX: 0,
      dragStartDate: new Date(),
      priorityColors: {
        '高': '#FF6B6B',
        '中': '#FFD166',
        '紧急': '#EF476F'
      },
      priorityIcons: {
        '高': 'fas fa-arrow-up',
        '中': 'fas fa-arrow-right',
        '紧急': 'fas fa-exclamation-triangle'
      },
      statusColors: {
        '待排产': '#E9ECEF',
        '已排产': '#4ECDC4',
        '生产中': '#1A936F',
        '已完成': '#6A0572'
      }
    }
  },
  computed: {
    dateRange() {
      const range = [];
      const date = new Date(this.startDate);
      date.setDate(date.getDate() - 15);
      
      for (let i = 0; i < 30; i++) {
        const newDate = new Date(date);
        range.push(newDate);
        date.setDate(date.getDate() + 1);
      }
      
      return range;
    },
    totalProcesses() {
      return this.orders.length * this.processes.length;
    }
  },
  mounted() {
    this.scrollToToday();
    this.orders = []
    this.search_db_updatatime();
  },
  methods: {
    search_db_updatatime(){
      // 原有数据库访问逻辑
      console.log("KKKKKKKKKKK")
      this.http.get('api/material_plan_xie/get_db_proinfo',
                          {}).then((reslut) => {
                            console.log(reslut[0])
                            for(let i=0;i<reslut.length;i++){
                              this.orders.push(
                                {
                                  id: reslut[i],
                                  processes: {
                                    smelting: { startDate: '2023-06-01', dailyInput: 1200, duration: 2 },
                                    hydrogenBreaking: { startDate: '2023-06-03', dailyInput: 800, duration: 3 },
                                    jetMilling: { startDate: '2023-06-06', dailyInput: 600, duration: 2 },
                                    pressing: { startDate: '2023-06-08', dailyInput: 400, duration: 2 },
                                    sintering: { startDate: '2023-06-10', dailyInput: 200, duration: 3 }
                                  }
                                },
                              )
                            }
                            
                        }).catch((error) => {
                            console.log("失败",error)
                            // return "未更新"
                        });


      // this.http.get('api/material_plan_xie/get_db_proinfo',
      //                     {}).then((reslut) => {
      //                       console.log(reslut[0])
      //                       for(let i=0;i<reslut.length;i++){
      //                         this.orders.push(
      //                           {
      //                             id: reslut[i]["schedule_id"],
      //                             productCode: reslut[i]["top_id"],
      //                             performance: reslut[i]["grade"],
      //                             blankSize: reslut[i]["schedule_blank_spec"],
      //                             mold: reslut[i]["mold_id"],
      //                             steelGrade: reslut[i]["steelgrade_id"],
      //                             planQuantity: reslut[i]["product_qty"],
      //                             singleWeight: reslut[i]["per_weight"],
      //                             totalWeight: reslut[i]["total_weight"],
      //                             processes: {
      //                               smelting: { startDate: '2023-06-01', dailyInput: 1200, duration: 2 },
      //                               hydrogenBreaking: { startDate: '2023-06-03', dailyInput: 800, duration: 3 },
      //                               jetMilling: { startDate: '2023-06-06', dailyInput: 600, duration: 2 },
      //                               pressing: { startDate: '2023-06-08', dailyInput: 400, duration: 2 },
      //                               sintering: { startDate: '2023-06-10', dailyInput: 200, duration: 3 }
      //                             }
      //                           },
      //                         )
      //                       }
                            
      //                   }).catch((error) => {
      //                       console.log("失败",error)
      //                       // return "未更新"
      //                   });
    },
    
    // 拖拽相关方法
    startDrag(e) {
      this.isDragging = true;
      this.startDragX = e.clientX;
      this.dragStartDate = new Date(this.startDate);
      document.body.style.cursor = 'grabbing';
      e.preventDefault();
    },
    
    doDrag(e) {
      if (!this.isDragging) return;
      
      const deltaX = e.clientX - this.startDragX;
      // 每100像素对应7天（一周）
      const daysDelta = Math.round(deltaX / 100) * 7;
      
      const newDate = new Date(this.dragStartDate);
      newDate.setDate(newDate.getDate() - daysDelta);
      this.startDate = newDate;
      
      e.preventDefault();
    },
    
    stopDrag() {
      if (this.isDragging) {
        this.isDragging = false;
        document.body.style.cursor = '';
      }
    },
    
    openEditDialog(order) {
      this.editingOrder = JSON.parse(JSON.stringify(order));
    },
    
    closeDialog() {
      this.editingOrder = null;
    },
    
    saveOrder() {
      if (!this.editingOrder) return;
      
      const index = this.orders.findIndex(o => o.id === this.editingOrder.id);
      if (index !== -1) {
        this.orders[index] = this.editingOrder;
      } else {
        this.orders.push(this.editingOrder);
      }
      
      this.closeDialog();
    },
    
    scrollDates(days) {
      const newDate = new Date(this.startDate);
      newDate.setDate(newDate.getDate() + days);
      this.startDate = newDate;
    },
    
    // 确保今天在可视区域中间
    scrollToToday() {
      const today = new Date();
      today.setDate(today.getDate() - 15);
      this.startDate = today;
    },
    
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    
    getDayOfWeek(date) {
      const days = ['日', '一', '二', '三', '四', '五', '六'];
      return `周${days[date.getDay()]}`;
    },
    
    formatDateRange(dates) {
      if (dates.length < 2) return '';
      const start = dates[0];
      const end = dates[dates.length - 1];
      return `${start.getFullYear()}-${start.getMonth()+1}-${start.getDate()} 至 ${end.getFullYear()}-${end.getMonth()+1}-${end.getDate()}`;
    },
    
    isToday(date) {
      const today = new Date();
      return date.getDate() === today.getDate() && 
             date.getMonth() === today.getMonth() && 
             date.getFullYear() === today.getFullYear();
    },
    
    getProcessStyle(order, process, date) {
      const processData = order.processes[process.key];
      if (!processData || !processData.startDate || !processData.duration) return {};
      
      const startDate = new Date(processData.startDate);
      const endDate = new Date(startDate);
      endDate.setDate(endDate.getDate() + parseInt(processData.duration) - 1);
      
      const displayDate = new Date(date);
      
      startDate.setHours(0, 0, 0, 0);
      endDate.setHours(0, 0, 0, 0);
      displayDate.setHours(0, 0, 0, 0);
      
      if (displayDate >= startDate && displayDate <= endDate) {
        const heightPercentage = Math.min(100, (processData.dailyInput / 2000) * 100);
        return {
          backgroundColor: process.color,
          height: `${heightPercentage}%`,
          opacity: displayDate.getTime() === startDate.getTime() ? 1 : 0.8
        };
      }
      
      return {};
    },
    
    getProcessTooltip(order, process, date) {
      const processData = order.processes[process.key];
      if (!processData || !processData.startDate || !processData.duration) return '';
      
      const startDate = new Date(processData.startDate);
      const endDate = new Date(startDate);
      endDate.setDate(endDate.getDate() + parseInt(processData.duration) - 1);
      
      const displayDate = new Date(date);
      
      startDate.setHours(0, 0, 0, 0);
      endDate.setHours(0, 0, 0, 0);
      displayDate.setHours(0, 0, 0, 0);
      
      if (displayDate >= startDate && displayDate <= endDate) {
        const dayOfProcess = Math.floor((displayDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
        return `${process.name}: 第${dayOfProcess}天/${processData.duration}天\n投入量: ${processData.dailyInput}kg`;
      }
      
      return '';
    },
    
    getProcessClass(process) {
      return `process-${process.key}`;
    },
    
    getMinStartDate(process, index) {
      if (index === 0 || !this.editingOrder) return null;
      
      const prevProcess = this.processes[index - 1];
      const prevData = this.editingOrder.processes[prevProcess.key];
      
      if (!prevData || !prevData.startDate || !prevData.duration) return null;
      
      const minDate = new Date(prevData.startDate);
      minDate.setDate(minDate.getDate() + parseInt(prevData.duration));
      return minDate.toISOString().split('T')[0];
    },
    
    getEndDate(processData) {
      if (!processData.startDate || !processData.duration) return null;
      
      const start = new Date(processData.startDate);
      const end = new Date(start);
      end.setDate(end.getDate() + parseInt(processData.duration) - 1);
      return end.toISOString().split('T')[0];
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

body {
  background: linear-gradient(135deg, #1a2a6c, #2c3e50);
  color: #333;
  min-height: 100vh;
  padding: 20px;
}

.gantt-container {
  max-width: 95%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  padding: 20px;
}

.header {
  text-align: center;
  padding: 20px 0;
  margin-bottom: 20px;
  background: linear-gradient(to right, #2c3e50, #4a6fa5);
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.header p {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.date-range-display {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  padding: 8px 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.scroll-control {
  display: flex;
  gap: 15px;
}

.scroll-control button {
  background: linear-gradient(to right, #4a6fa5, #2c3e50);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.scroll-control button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.scroll-control button:active {
  transform: translateY(0);
}

.gantt-table-container {
  overflow-x: auto;
  max-height: 70vh;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: white;
  margin-bottom: 20px;
  cursor: grab;
  user-select: none;
}

.gantt-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1000px;
}

th, td {
  border: 1px solid #e0e0e0;
  text-align: center;
  padding: 12px 15px;
}

.order-header {
  background: linear-gradient(to bottom, #2c3e50, #1a2a6c);
  color: white;
  position: sticky;
  left: 0;
  z-index: 10;
  min-width: 150px;
  font-size: 1.1rem;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.info-header {
  background: linear-gradient(to bottom, #4a6fa5, #2c3e50);
  color: white;
  position: sticky;
  left: 150px;
  z-index: 9;
  min-width: 120px;
  font-size: 1rem;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.date-header {
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
  min-width: 60px;
  font-weight: 600;
  color: #495057;
  position: relative;
}

.today-header {
  background: linear-gradient(to bottom, #ffd166, #ffb347);
  color: #2c3e50;
  font-weight: 700;
  position: relative;
}

.today-header::after {
  content: "今天";
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.7rem;
  background: #ef476f;
  color: white;
  padding: 1px 4px;
  border-radius: 4px;
}

.order-cell {
  background: linear-gradient(to right, #e9ecef, #d8e2dc);
  cursor: pointer;
  position: sticky;
  left: 0;
  z-index: 5;
  font-weight: 700;
  transition: all 0.3s;
  min-width: 150px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08);
}

.order-cell:hover {
  background: linear-gradient(to right, #d8e2dc, #c7d6d0);
  transform: scale(1.02);
}

.info-cell {
  background: #ffffff;
  position: sticky;
  left: 150px;
  z-index: 4;
  min-width: 120px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  font-size: 0.9rem;
}

.edit-icon {
  margin-left: 10px;
  color: #4a6fa5;
  transition: all 0.3s;
}

.order-cell:hover .edit-icon {
  color: #ef476f;
  transform: rotate(15deg);
}

.process-cell {
  padding: 0;
  height: 60px;
  position: relative;
  background: repeating-linear-gradient(
    45deg,
    #f8f9fa,
    #f8f9fa 10px,
    #f0f2f5 10px,
    #f0f2f5 20px
  );
}

.today-cell {
  background: repeating-linear-gradient(
    45deg,
    #fff8e1,
    #fff8e1 10px,
    #ffecb3 10px,
    #ffecb3 20px
  );
}

.process-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 5px;
  gap: 3px;
}

.process-bar {
  width: 90%;
  transition: all 0.3s ease;
  border-radius: 4px;
  height: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

/* 移除了光效动画 */
/* .process-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shine 1.5s infinite;
} */

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.edit-dialog {
  background: linear-gradient(to bottom right, white, #f8f9fa);
  border-radius: 16px;
  padding: 30px;
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  position: relative;
}

.edit-dialog h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 10px;
}

.edit-dialog h2 i {
  color: #4a6fa5;
}

.process-form {
  background: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  border-left: 4px solid var(--process-color);
}

.process-form h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 10px;
}

.process-form h3 i {
  color: var(--process-color);
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}

.form-group {
  flex: 1;
  min-width: 200px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-group input, .form-group select {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #ced4da;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s;
}

.form-group input:focus, .form-group select:focus {
  border-color: #4a6fa5;
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
  outline: none;
}

.duration-display {
  background: #f8f9fa;
  padding: 12px 15px;
  border-radius: 8px;
  font-weight: 600;
  color: #495057;
  border: 2px dashed #ced4da;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #e9ecef;
}

.dialog-buttons button {
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}

.dialog-buttons .save-btn {
  background: linear-gradient(to right, #1a936f, #0d7e5d);
  color: white;
  box-shadow: 0 4px 8px rgba(26, 147, 111, 0.3);
}

.dialog-buttons .cancel-btn {
  background: linear-gradient(to right, #6c757d, #5a6268);
  color: white;
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.dialog-buttons .save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(26, 147, 111, 0.4);
}

.dialog-buttons .cancel-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
}

.close-dialog {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.3s;
}

.close-dialog:hover {
  color: #ef476f;
  transform: rotate(90deg);
}

.stats-bar {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 200px;
  background: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 10px 0;
}

.stat-label {
  font-size: 0.9rem;
  color: #6c757d;
  text-align: center;
}

.legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.footer {
  text-align: center;
  margin-top: 30px;
  padding: 20px;
  color: white;
  font-size: 0.9rem;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .controls {
    flex-direction: column;
    gap: 15px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .header h1 {
    font-size: 1.8rem;
  }
  
  .header p {
    font-size: 1rem;
  }
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #6c757d;
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 15px;
  color: #ced4da;
}
</style>